<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斗地主游戏房间</title>
    <link rel="stylesheet" th:href="@{/js/lib/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/js/lib/fontawesome/css/all.min.css}">
    <link rel="stylesheet" th:href="@{/css/game.css}">
</head>
<body>
    <!-- 横屏提示 -->
    <!-- <div class="orientation-lock">
        <div>
            <i class="fas fa-mobile-alt fa-3x"></i>
            <p>请将手机横屏以获得最佳游戏体验</p>
        </div>
    </div> -->

    <div class="game-wrapper">
        <div class="game-container">
            <!-- 游戏头部信息 -->
            <div class="game-header">
                <div class="room-info">
                    <h2>房间: <span id="roomName"></span></h2>
                    <div class="game-status">
                        状态: <span id="gameStatus"></span>
                    </div>
                </div>
                <div class="player-actions">
                    <button id="readyBtn" class="btn btn-primary">
                        <i class="fas fa-check"></i> 准备
                    </button>
                    <button id="leaveRoom" class="btn btn-danger" onclick="leaveRoom()">
                        <i class="fas fa-sign-out-alt"></i> 离开房间
                    </button>
                </div>
            </div>

            <!-- 游戏主区域 -->
            <div class="game-main">
                <!-- 左侧玩家列表 -->
                <div class="player-list-sidebar">
                    <div class="player-list-container">
                        <h4><i class="fas fa-users"></i> 玩家列表</h4>
                        <ul id="playersList" class="list-unstyled">
                            <!-- 玩家表会动态加载 -->
                        </ul>
                    </div>
                </div>

                <!-- 中央游戏区域 -->
                <div class="game-play-area">
                    <!-- 其他玩家区域 -->
                    <div class="other-players">
                        <div id="player1" class="player-spot left-player">
                            <div class="player-waiting">等待玩家加入...</div>
                        </div>
                        <div id="player2" class="player-spot right-player">
                            <div class="player-waiting">等待玩家加入...</div>
                        </div>
                    </div>

                    <!-- 牌桌中央区域 -->
                    <div class="table-center">
                        <div class="landlord-cards">
                            <!-- 地主牌区域 -->
                            <div class="landlord-cards-container">
                                <div class="landlord-card"></div>
                                <div class="landlord-card"></div>
                                <div class="landlord-card"></div>
                            </div>
                        </div>
                        <div id="lastPlayedCards" class="played-cards-area">
                            <!-- 最后打出的牌会显示在这里 -->
                        </div>
                    </div>

                    <!-- 当前玩家区域 -->
                    <div class="current-player-area">
                        <div id="myCards" class="my-cards">
                            <!-- 玩家的牌会显示在这里 -->
                        </div>
                        <div class="game-controls">
                            <button id="playCards" class="btn btn-success" disabled>
                                <i class="fas fa-play"></i> 出牌
                            </button>
                            <button id="pass" class="btn btn-secondary" disabled>
                                <i class="fas fa-times"></i> 不出
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 右侧游戏信息 -->
                <div class="game-info-sidebar">
                    <div class="game-info-container">
                        <h4><i class="fas fa-info-circle"></i> 游戏信息</h4>
                        <div class="game-stats">
                            <div class="stat-item">
                                <span class="stat-label">当前倍数:</span>
                                <span id="currentMultiple" class="stat-value">1</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">剩余时间:</span>
                                <span id="timeRemaining" class="stat-value">30</span>
                            </div>
                        </div>
                        <div class="game-history">
                            <h5>出牌记录</h5>
                            <div id="playHistory" class="play-history-list">
                                <!-- 出牌记录会动态加载 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 菜单按钮 -->
            <button class="menu-toggle btn btn-light">
                <i class="fas fa-bars"></i>
            </button>

            <!-- 移动端菜单 -->
            <div class="mobile-menu">
                <div class="mobile-menu-header">
                    <h4>游戏信息</h4>
                    <button class="close-menu btn btn-light">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="player-list-section">
                    <h5>玩家列表</h5>
                    <ul id="mobilePlayersList" class="list-unstyled">
                        <!-- 玩家列表会动态加载 -->
                    </ul>
                </div>
                <div class="game-info-section">
                    <h5>游戏信息</h5>
                    <div class="game-stats">
                        <!-- 游戏统计信息 -->
                    </div>
                    <div class="game-history">
                        <!-- 游戏历史记录 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 游戏提示弹窗 -->
    <div class="modal fade" id="gameAlert" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">提示</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="alertMessage"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 游戏结算弹窗 -->
    <div class="modal fade" id="gameOverModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">游戏结算</h5>
                </div>
                <div class="modal-body">
                    <div class="game-result">
                        <h4 class="text-center mb-4">本局得分</h4>
                        <div id="scoreList" class="score-list">
                            <!-- 得分列表将动态插入 -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="countdown">新局将在 <span id="countdown">5</span> 秒后开始</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 按顺序引入 JS 文件 -->
    <script th:src="@{/js/lib/jquery-3.5.1.min.js}"></script>
    <script th:src="@{/js/lib/popper.min.js}"></script>
    <script th:src="@{/js/lib/bootstrap.min.js}"></script>
    <script th:src="@{/js/lib/sockjs.min.js}"></script>
    <script th:src="@{/js/lib/stomp.min.js}"></script>
    <!-- 先引入 common.js -->
    <script th:src="@{/js/common.js}"></script>
    <!-- 再引入其他 js 文件 -->
    <script type="module" th:src="@{/js/utils/cardUtils.js}"></script>
    <script type="module" th:src="@{/js/game.js}"></script>
</body>
</html> 